<template>
    <div>
        <c-title text="设备管理"></c-title>
        <div class='owner-equipment'>
            <van-search v-model="keyword" shape="round" placeholder="请输入设备号" @search="search" />
            <template v-if="list && list.length !== 0">
                <div class="box" v-for="(item, i) in list" :key="i" >
                    <div style="display: flex; justify-content: space-between;">
                        <span style="font-size: 0.9375rem; font-weight: 600;">设备号：{{ item.device_no }}</span>
                        <span style="color: #c2c2c2; font-size: 0.75rem;">{{ item.created_at }}</span>
                    </div>
                    <div style="display: flex; justify-content: space-between; align-items: center; margin-top: 0.3125rem;">
                        <div style="color: #c2c2c2; font-size: 0.75rem; text-align: left;">地址：{{ item.address }}</div>
                        <i class="iconfont icon-bc_eweima" @click="handle(item)"></i>
                    </div>
                </div>
            </template>
            <div class="record" v-else>
                暂无记录
            </div>

            <van-popup v-model="show" @close="show = false" round position="bottom">
                <div style="text-align: left; font-size: 1rem; font-weight: 600; margin: 1.125rem 1.125rem 1.5625rem;">添加设备
                </div>
                <div class="equipment-number">
                    <span style="width: 20%;">设备号</span>
                    <input v-model="device_no" type="text" class="input" placeholder="请输入设备号" />
                </div>
                <div class="equipment-number">
                    <span style="width: 20%;">设备地址</span>
                    <textarea v-model="address" class='textarea' auto-heigh placeholder="请输入设备地址"></textarea>
                </div>
                <div style="margin: 1.6875rem 1.7188rem 0.9375rem;">
                    <van-button block round color="#FE5E56" @click="submit">保存</van-button>
                </div>

            </van-popup>

            <div class="btn"  :class="[fun.getPhoneEnv() == 3 ? 'pcStyle' : '']">
                <van-button block color="#FE5E56" round @click="show = true">添加设备</van-button>
            </div>
        </div>

        <van-overlay :show="overlay_show" @click="overlay_show = false">
            <div class="wrapper" @click.stop>
                <div class="block">
                    <van-icon name="cross" class="close" @click="overlay_show = false" />
                    <img :src="img" />
                    <p>长按保存按钮</p>
                </div>
            </div>
        </van-overlay>
    </div>
</template>

<script>
import { scrollMixin } from '../../utils/mixin.js';
export default {
    mixins: [scrollMixin],
    data() {
        return {
            device_no: "",
            address: "",
            show: false,
            keyword: "",
            isLoadMore: true,
            current_page: 1,
            last_page: 1,
            list: [],
            overlay_show: false,
            img: ""
        };
    },
    activated() {
        this.isLoadMore= true;
        this.overlay_show = false;
        this.show = false;
        this.getData()
    },
    methods: {
        handle(item) {
            $http.get("plugin.water-machine.frontend.business.device.download-code", { id: item.id }, '').then(res => {
                if (res.result) {
                    this.img = res.data;
                    this.overlay_show = true;
                }
            })
        },
        submit() {
            let json = {
                device_no: this.device_no,
                address: this.address
            }
            $http.post('plugin.water-machine.frontend.business.device.store', json).then(res => {

                if (res.result) {
                    this.show = false;
                    this.device_no = '';
                    this.address = '';
                    this.getData()
                }
                this.$toast(res.msg)
            })
        },
        search() {
            this.getData()
        },
        getData(page = 1) {
            let json = {
                page,
                device_no: this.keyword
            }
            $http.get('plugin.water-machine.frontend.business.device.index', json,"").then(res => {
                this.isLoadMore = true;
                if (res.result) {
                    (page == 1) ? (this.list = res.data.data) : (this.list = this.list.concat(res.data.data));
                    this.current_page = res.data.current_page;
                    this.last_page = res.data.last_page;
                } else {
                    this.$toast(res.msg)
                }
            })
        },
        getMoreData() {
            this.isLoadMore = false;
            if (this.current_page >= this.last_page) {
                return;
            }
            let page = this.current_page + 1;
            this.getData(page);
        },
    }
};
</script>

<style scoped lang="scss">
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.block {
  position: relative;
  width: 13rem;
  height: 14rem;
  background: #fff;
  display: flex;
  border-radius: 0.625rem;
  flex-direction: column;
  padding-bottom: 0.625rem;

  img {
    width: 90%;
    height: 90%;
  }

  .close {
    position: absolute;
    right: 10px;
    top: 10px;
    font-size: 1.0938rem;
  }
}

.owner-equipment {
  position: relative;
  min-height: 100vh;
  padding-bottom: 6.25rem;

  .record {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #c2c2c2;
    font-size: 0.75rem;
  }

  .pcStyle {
    width: 375px;
    position: fixed;
    bottom: 0;
    left: 50% !important;
    right: 0;
    transform: translateX(-50%);
    background: #fff;
    padding: 0.9375rem 1.7188rem;
  }

  .btn {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    padding: 0.9375rem 1.7188rem;
  }

  .box {
    background: #fff;
    border-radius: 0.625rem;
    padding: 0.8125rem 0.625rem;
    margin: 0.625rem 0.75rem;
  }

  .equipment-number {
    margin: 0 0.75rem 0.625rem;
    display: flex;
    align-items: center;
    text-align: left;

    span {
      position: relative;
    }

    span::before {
      content: "*";
      left: 0;
      top: 0;
      color: #fe5e56;
    }
  }

  .input {
    width: 80%;
    border-radius: 0.625rem;
    background: #f7f7f7;
    border: unset;
    padding: 0.6563rem 1rem;
  }

  .textarea {
    width: 80%;
    padding: 0.6563rem 1rem;
    border-radius: 0.625rem;
    background: #f7f7f7;
    height: 5rem;
    border: none;
  }
}
</style>
